<template>
  <div class="login-container">
    <div class="login-box">
      <el-form
          ref="ruleFormRef"
          style="max-width: 96%"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
      >
        <h1>东软环保公众监督平台</h1>
        <h2>————管理员端————</h2>
        <el-form-item label="管理员编码" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入管理员编码"/>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password" >
          <el-input v-model="ruleForm.password" placeholder="请输入登录密码" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">
            登录
          </el-button>
        </el-form-item>
        <!--	  <div class="register-link">
                  还没有账号？<router-link to="/register">立即注册</router-link>
                </div>-->
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import axios from 'axios'
import qs from 'qs'
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';

const formSize = ref('default')
const ruleFormRef = ref()
let ruleForm = reactive({
  userName: '',
  password: '',
})
let myrules = reactive({
  userName: [{
    required: true,
    trigger: 'blur',
    message: '编码不能为空'
  }],
  password: [{
    required: true,
    trigger: 'blur',
    message: '密码为必填项'
  }]
})
let formRef = ref(null)
let router = useRouter()
let submitForm = () => {
  // router.push({
  //   name: 'AdministerPage',
  // });
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      //console.log(ruleForm.userName)
      //请求后台
      axios.post("http://localhost:8085/admin/login",
          {

              adminCode: ruleForm.userName,
              password: ruleForm.password

          })
          .then(res => {
            //用户登录成功，向sessionStorage存储一个标识

            let result = res.data
            console.log(result);
            if (result.code == 1) {
              sessionStorage.setItem("isLogin", 'ok')
              sessionStorage.setItem("admin",JSON.stringify(result.data))
              //ElMessage.success('登录成功!');
              //跳转到首页
              router.push({
                path: '/admin/index'
              });
            } else {
              //提示失败原因
              ElMessage.error(result.message)
            }

          })
      //如果后台后台返回成功
      //就提示登录成功，跳转到后台管理首页
      //如果登录失败，提示失败原因，不跳转


    } else {
      ElMessage.error('登录失败!');
      return false;
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 100px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  margin-bottom: 30px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}
</style>
